<template>
	<view class="office_shenpi_dingdan">
		<view class="top">
			<view @click="show = true"> <text>排序</text> <img style="width: 24rpx; height: 24rpx;"
					src="/static/officeImgs/officeshenpi3.png" alt="" /> </view>
			<view><text @click="show1 = true">筛选</text> <img style="width: 24rpx; height: 24rpx;"
					src="/static/officeImgs/officeshenpi4.png" alt="" /></view>
		</view>

		<view class="office_shenpi_dingdan_bot">
			<ul class="office_shenpi_dingdan_bot_ul">
				<li class="office_shenpi_dingdan_bot_ul_li">
					<view class="office_shenpi_dingdan_bot_ul_li_left">
						<view style="font-weight: 800; color: rgb(153, 153, 153);" @click="gooffice_dingdanbiaoti">订单标题
						</View>
						<view style="margin-top: 10rpx;margin-bottom: 10rpx;">订单金额:￥10,000.00</View>
						<view>关联客户:深圳木卫二科技有限公司</View>
					</view>
					<view class="office_shenpi_dingdan_bot_ul_li_right">
						<view>
							<text class="office_shenpi_dingdan_bot_ul_li_right_square"></text>
							<text>等待审批</text>
						</view>

						<img class="office_shenpi_dingdan_bot_ul_li_right_img"
							src="/static/officeImgs/officeshenpi2.png" alt="" />
						<view>赵小刚</view>
					</view>
				</li>

				<li class="office_shenpi_dingdan_bot_ul_li">
					<view class="office_shenpi_dingdan_bot_ul_li_left">
						<view style="font-weight: 800; color: rgb(153, 153, 153);" @click="gooffice_dingdanbiaoti">订单标题
						</view>
						<view style="margin-top: 10rpx;margin-bottom: 10rpx;">订单金额:￥10,000.00</View>
						<view>关联客户:深圳木卫二科技有限公司</View>
					</view>
					<view class="office_shenpi_dingdan_bot_ul_li_right">
						<view>
							<text class="office_shenpi_dingdan_bot_ul_li_right_square_a"></text>
							<text>审批通过</text>
						</view>

						<img class="office_shenpi_dingdan_bot_ul_li_right_img"
							src="/static/officeImgs/officeshenpi2.png" alt="" />
						<view>赵小刚</view>
					</view>
				</li>


				<li class="office_shenpi_dingdan_bot_ul_li">
					<view class="office_shenpi_dingdan_bot_ul_li_left">
						<view style="font-weight: 800; color: rgb(153, 153, 153);" @click="gooffice_dingdanbiaoti">订单标题
						</View>
						<view style="margin-top: 10rpx;margin-bottom: 10rpx;">订单金额:￥10,000.00</View>
						<view>关联客户:深圳木卫二科技有限公司</View>
					</view>
					<view class="office_shenpi_dingdan_bot_ul_li_right">
						<view>
							<text class="office_shenpi_dingdan_bot_ul_li_right_square_b"></text>
							<text>审批否决</text>
						</view>

						<img class="office_shenpi_dingdan_bot_ul_li_right_img"
							src="/static/officeImgs/officeshenpi2.png" alt="" />
						<view>赵小刚</view>
					</view>
				</li>

				<li class="office_shenpi_dingdan_bot_ul_li">
					<view class="office_shenpi_dingdan_bot_ul_li_left">
						<view style="font-weight: 800; color: rgb(153, 153, 153);" @click="gooffice_dingdanbiaoti">订单标题
						</View>
						<view style="margin-top: 10rpx;margin-bottom: 10rpx;">订单金额:￥10,000.00</View>
						<view>关联客户:深圳木卫二科技有限公司</View>
					</view>
					<view class="office_shenpi_dingdan_bot_ul_li_right">
						<view>
							<text class="office_shenpi_dingdan_bot_ul_li_right_square_c"></text>
							<text>驳回审批</text>
						</view>

						<img class="office_shenpi_dingdan_bot_ul_li_right_img"
							src="/static/officeImgs/officeshenpi2.png" alt="" />
						<view>赵小刚</view>
					</view>
				</li>

				<li class="office_shenpi_dingdan_bot_ul_li">
					<view class="office_shenpi_dingdan_bot_ul_li_left">
						<view style="font-weight: 800; color: rgb(153, 153, 153);" @click="gooffice_dingdanbiaoti">订单标题
						</View>
						<view style="margin-top: 10rpx;margin-bottom: 10rpx;">订单金额:￥10,000.00</View>
						<view>关联客户:深圳木卫二科技有限公司</View>
					</view>
					<view class="office_shenpi_dingdan_bot_ul_li_right">
						<view>
							<text class="office_shenpi_dingdan_bot_ul_li_right_square"></text>
							<text>等待审批</text>
						</view>

						<img class="office_shenpi_dingdan_bot_ul_li_right_img"
							src="/static/officeImgs/officeshenpi2.png" alt="" />
						<view>赵小刚</view>
					</view>
				</li>
			</ul>
		</view>
	</view>

	<!-- 排序的弹窗 -->

	<u-popup class="u-popupp" :show="show" @close="close" @open="open" mode="top" style="z-index: 99;font-size: 28rpx;">
		<view class="popup_one">
			<view style="margin-top: 40rpx; margin-bottom: 20rpx; font-weight: 900;padding-left: 20rpx;">排序方式</view>
			<ul class="popup_one_ul" style="padding: 40rpx;">
				<li class="popup_one_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">正序排列</li>
				<li class="popup_one_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">倒序排列</li>
			</ul>
		</view>

		<view class="popup_two">
			<view style="margin-top: 20rpx; margin-bottom: 20rpx; font-weight: 900;padding-left: 20rpx;">排序属性</view>
			<ul class="popup_two_ul" style="padding: 40rpx;">
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">订单编号</li>
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">订单标题</li>
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">关联客户</li>
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">订单总金额</li>
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">创建人员</li>
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">提交时间</li>
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">审批类型</li>
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">审批人员</li>
				<li class="popup_two_li"
					style="border: 2rpx solid #ccc;height: 70rpx; line-height: 70rpx;padding-left: 20rpx;">审批时间</li>
			</ul>

			<view class="popup_btns" style="display: flex;">
				<button @click="reset"
					style="width: 330rpx;margin-left: 40rpx;background-color: #fff;color: rgb(48, 146, 254);">重置</button>
				<button @click="reset"
					style="width: 330rpx;background-color: rgb(0, 121, 254); color: #fff;">确定</button>
			</view>
		</view>
	</u-popup>



	<!-- 筛选的弹窗 -->

	<u-popup class="u-pop" :show="show1" @close="close1" @open="open1" mode="top" style="z-index: 99;">
		<view class="popup_three">
			<view style="margin-left: 20rpx;font-weight: 900;margin-bottom: 40rpx;margin-top: 40rpx;">审批类型</view>

			<ul class="popup_three_ul" style="display: flex;flex-wrap: wrap;margin-left: 40rpx;">
				<li class="popup_three_li popup_three_li_active"
					style="width: 200rpx;text-align: center;margin-right: 20rpx;height: 60rpx;line-height: 60rpx;margin-bottom: 20rpx;">
					全部
				</li>

				<li
					style="width: 200rpx;height: 60rpx;line-height: 60rpx;border: 1px solid #ccc;color: rgb(153, 153, 153);text-align: center;margin-right: 20rpx;">
					等待审批
				</li>

				<li
					style="width: 200rpx;height: 60rpx;line-height: 60rpx;border: 1px solid #ccc;color: rgb(153, 153, 153);text-align: center;">
					审批通过
				</li>

				<li
					style="width: 200rpx;height: 60rpx;line-height: 60rpx;border: 1px solid #ccc;color: rgb(153, 153, 153);text-align: center;margin-right: 20rpx;">
					审批否决
				</li>

				<li
					style="width: 200rpx;height: 60rpx;line-height: 60rpx;border: 1px solid #ccc;color: rgb(153, 153, 153);text-align: center;">
					驳回审批
				</li>
			</ul>

			<view style="margin-left: 20rpx;font-weight: 900;margin-bottom: 40rpx;margin-top: 40rpx;">关键词查询</view>

			<input type="text" placeholder="输入搜索关键词" style="border: 1px solid #ccc;margin-left: 20rpx;height: 80rpx;" />


			<view style="padding: 20rpx;background-color: #fff;position: relative;">
				<view style="margin-left: 20rpx;font-weight: 900;margin-bottom: 40rpx;margin-top: 40rpx;">提交人员</view>
				<view style="width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #fff;
				background-color: rgb(0, 121, 254);
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 100rpx;
				top: 132rpx;">√</view>
				<view style="width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #fff;
				background-color: rgb(0, 121, 254);
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 250rpx;
				top: 132rpx;">√</view>
				<view style="width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #fff;
				background-color: rgb(0, 121, 254);
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 400rpx;
				top: 132rpx;">√</view>
				<view style="width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #fff;
				background-color: rgb(0, 121, 254);
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 550rpx;
				top: 132rpx;">√</view>
				<ul style="margin-top: 20rpx;display: flex;justify-content: space-around;">
					<li style="text-align: center;">
						<img src="/static/officeImgs/officeshenpi2.png" alt="" style="width: 70rpx;height: 70rpx;" />
						<view>赵小刚</view>
					</li>

					<li style="text-align: center;">
						<img class="renyuan_li_img" src="/static/officeImgs/officeshenpi2.png" alt=""
							style="width: 70rpx;height: 70rpx;" />
						<view>周小明</view>
					</li>

					<li style="text-align: center;">
						<img src="/static/officeImgs/officeshenpi2.png" alt="" style="width: 70rpx;height: 70rpx;" />
						<view>郭小涛</view>
					</li>

					<li style="text-align: center;">
						<img src="/static/officeImgs/officeshenpi2.png" alt="" style="width: 70rpx;height: 70rpx;" />
						<view>张小伟</view>
					</li>

					<li style="text-align: center;">
						<img src="/static/officeImgs/office_shenpi_dingdan_ok.png" alt=""
							style="width: 70rpx;height: 70rpx;" />
						<view>更多</view>
					</li>
				</ul>
			</view>

			<view style="padding:20rpx;background-color:#fff;">
				<view style="margin-left: 20rpx;font-weight: 900;margin-bottom: 40rpx;margin-top: 40rpx;">提交时间</view>

				<input placeholder="选择时间范围"
					style="border: 1px solid #ccc;margin-left: 20rpx;height: 80rpx;margin-bottom: 40rpx;" />
			</view>

			<view style="display: flex;">
				<button @click="show1 = false"
					style="width: 330rpx;margin-left: 40rpx;background-color: #fff;color: rgb(48, 146, 254);">重置</button>
				<button @click="show1 = false"
					style="width: 330rpx;background-color: rgb(0, 121, 254); color: #fff;">确定</button>
			</view>
		</view>


	</u-popup>


</template>

<script setup>
	import {
		ref
	} from "vue"
	const gooffice_dingdanbiaoti = () => {
		uni.navigateTo({
			url: "/pages/office_shenpi_dingdanbiaoti/office_shenpi_dingdanbiaoti"
		})
	}

	const show = ref(false)

	const open = () => {
		show.value = true
	}

	const close = () => {
		show.value = false
	}

	const reset = () => {
		show.value = false
	}


	const show1 = ref(false)

	const open1 = () => {
		show1.value = true
	}

	const close1 = () => {
		show1.value = false
	}
</script>

<style lang="scss">
	body {
		font-size: 28rpx;
	}

	.popup_three_li_active {
		border: 2rpx solid blue;
		color: blue;
	}

	.office_shenpi_dingdan {
		color: rgb(153, 153, 153);
		background-color: rgb(248, 248, 248);
		font-size: 28rpx;
		padding: 20rpx;

		.top {
			display: flex;
			justify-content: space-between;

			view {
				text-align: center;
				width: 400rpx;
			}
		}

		.office_shenpi_dingdan_bot {
			margin-top: 40rpx;

			.office_shenpi_dingdan_bot_ul {
				.office_shenpi_dingdan_bot_ul_li {
					margin-top: 20rpx;
					border-radius: 20rpx;
					padding: 10rpx;
					display: flex;
					height: 200rpx;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;

					.office_shenpi_dingdan_bot_ul_li_right {
						text-align: center;

						.office_shenpi_dingdan_bot_ul_li_right_img {
							width: 56rpx;
							height: 56rpx;
							margin-top: 10rpx;
							margin-bottom: 10rpx;
						}

						.office_shenpi_dingdan_bot_ul_li_right_square {
							display: inline-block;
							margin-right: 10rpx;
							width: 12rpx;
							height: 12rpx;
							background-color: rgb(88, 163, 247);
							border-radius: 50%;
							border: 2rpx solid rgb(88, 163, 247);
						}

						.office_shenpi_dingdan_bot_ul_li_right_square_a {
							display: inline-block;
							margin-right: 10rpx;
							width: 12rpx;
							height: 12rpx;
							background-color: rgb(75, 206, 208);
							border-radius: 50%;
							border: 2rpx solid rgb(75, 206, 208);
						}

						.office_shenpi_dingdan_bot_ul_li_right_square_b {
							display: inline-block;
							margin-right: 10rpx;
							width: 12rpx;
							height: 12rpx;
							background-color: rgb(251, 114, 128);
							border-radius: 50%;
							border: 2rpx solid rgb(251, 114, 128);
						}

						.office_shenpi_dingdan_bot_ul_li_right_square_c {
							display: inline-block;
							margin-right: 10rpx;
							width: 12rpx;
							height: 12rpx;
							background-color: rgb(255, 169, 76);
							border-radius: 50%;
							border: 2rpx solid rgb(255, 169, 76);
						}
					}


				}
			}
		}
	}

	.u-popupp {
		padding: 40rpx;

		.popup_one {
			background-color: red;
			padding: 20rpx;
		}
	}
</style>